import React, { memo, useCallback, useState } from "react";

/* 
useCallback：主要用于父子组件嵌套，父组件会基于属性把方法传递给子组件的情况中;useCallback可以保证父组件（函数组件）每次更新，不会创建新的函数堆，而是获取之前创建的函数引用，这样传递给子组件的函数值不会变化；
如果子组件做了优化，则可以避免子组件的无效更新
 + 类组件用PureComponent(浅比较)
 + 函数组件用memo函数(memo函数会对组件的属性进行浅比较，两次传递的属性值相同，则函数组件不会更新)


*/
class Child1 extends React.PureComponent{
  render(){
    console.log('Child1 render')
    return <div>
      子组件1
      <button onClick={this.props.handler}>处理</button>
    </div>
  }
}

class Child2 extends React.PureComponent{
  render(){
    console.log('Child2 render')
    return <div>
      子组件2
      <button onClick={this.props.handler}>处理</button>
    </div>
  }
}

//若Child2为函数组件
/* const Child2 = memo(function Child2(props){
  console.log('Child2 render')
    return <div>
      子组件2
      <button onClick={this.props.handler}>处理</button>
    </div>
}) */

export default function Usecallback(){
  let [num,setNum] = useState(111)
  //第一次执行：创建函数堆 0x001
  //第二次执行：创建函数堆 0x003
  const handler1=()=>{
    console.log('方法一')
  }
  //第一次执行：创建函数堆 0x002
  //第二次执行：不会创建新的函数堆
  const handler2=useCallback(()=>{
    console.log('方法二')
  },[])
  
  return <div>
    <Child1 handler={handler1}/>
    <Child2 handler={handler2}/>
    <br/>
    {num}
    <button onClick={()=>setNum(100)}>父组件更新</button>
  </div>
}